<template>
  <div class="home-page">
    <el-container direction="vertical" class="welcome-section">
      <el-header class="welcome-header">欢迎使用惊喜一餐！</el-header>
      <el-main>
        <el-card>
          <h3>推荐餐厅</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
              <el-card>
                <img :src="restaurant.image" alt="restaurant image" class="restaurant-image"/>
                <h4>{{ restaurant.name }}</h4>
                <el-rate v-model="restaurant.rating" disabled></el-rate>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '美食餐厅A', image: '../assets/restaurantpicture/restaurant.jpg', rating: 4.5 },
        { id: 2, name: '美食餐厅B', image: '../assets/restaurantpicture/restaurant.jpg', rating: 4.7 },
        { id: 3, name: '美食餐厅C', image: '../assets/restaurantpicture/restaurant.jpg', rating: 4.3 }
      ]
    };
  }
};
</script>

<style scoped>
.welcome-header {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}
.restaurant-image {
  width: 100%;
  height: auto;
}
</style>
